<!DOCTYPE html>
<!--suppress ALL-->
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta name="viewport"
          content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0,user-scalable=no,minimal-ui">
    <title>重置密码-市场摊位租赁竞拍系统</title>
    <script type="text/javascript" th:src="@{/asserts/js/jQuery-3.6.0.js}"></script>
    <link rel="stylesheet" type="text/css" th:href="@{/asserts/css/reset.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/asserts/css/global.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/asserts/css/web.css}"/>
    <link rel="stylesheet" type="text/css" th:href="@{/asserts/css/k15.css}"/>
</head>
<body>
<div id="regDiv" style="background: url(../asserts/img/beijing3.jpeg);background-size: 100% 100%;">
    <p style="font-size: 25px; text-align: center; margin-top: 35px;color: rgb(49,134,176)">重置密码</p>
    <div ><p class="e-l-jy" style="height: 30px"></p></div>
` <div id="message" class="logbox-error" style="font-size: 15px"></div>

    <!--   重置密码         -->
    <form id="registerForm" th:action="@{/user/register}" method="post">
        <div>
            <ol class="e-login-options" style="height: 220px">
                <li style="padding-left: 100px">
                    <span style="font-size: 16px ; color: #666">用户名：</span>
                    <input id="username" type="text" name="username"  placeholder="请输入您原先的用户名" style="width: 250px;margin-left: 18px"/>
                    <span class="msg1" id="message1"></span>
                </li><br/>
                <li style="padding-left: 100px">
                    <span style="font-size: 16px ; color: #666">邮&nbsp;&nbsp;&nbsp;箱：</span>
                    <input id="email" type="text" name="email"  placeholder="请输入邮箱" style="width: 250px;margin-left: 18px"/>
                    <span class="msg1" id="message2"></span>
                </li><br/>
                <li style="padding-left: 100px">
                    <span style="font-size: 16px ; color: #666">验证码：</span>
                    <input id="code" type="text" name="code"  placeholder="请输入验证码" style="width: 250px;margin-left: 18px"/>
                    <button id="btn-captcha" type="button" style="border: 1px solid red;width: 100px;height: 30px" onclick="sendMessage()">获取验证码</button>
                    <span class="msg1" id="message3"></span>
                </li><br/>
                <li style="padding-left: 100px">
                    <span style="font-size: 16px ; color: #666">新密码：</span>
                    <input id="password" type="password" name="password"  placeholder="请输入新密码" style="width: 250px;margin-left: 17px"/>
                    <span class="msg1" id="message4"></span>
                </li><br/>
                <li style="padding-left: 100px">
                    <span style="font-size: 16px ; color: #666">重输密码：</span>
                    <input id="password2" type="password"  placeholder="确认新密码" style="width: 250px"/>
                    <span class="msg1" id="message5"></span>
                </li><br/>
                <br/>

            </ol>
            <section class="tac" style="margin-top: 110px">
                <input id="loginIdReset" type="button" value="保 存" class="e-login-btn" onclick="resetPass()"
                       style="background-color: rgb(44,192,242);width: 200px;margin-left: 100px;cursor: pointer" />
                <input type="reset" value="重 置" class="e-login-btn" onclick="reset()"
                       style="background-color: indianred;width: 200px;margin-left: 100px;position: relative; left: 250px;top: -35px;cursor: pointer" />
            </section>
        </div>
    </form>
</div>
</body>
<script>
    /**
     * 校验用户名和邮箱
     * 发送验证码
     */
    function sendMessage() {

        $.ajax({
            type: "post",
            url: "/user/verify?username=" + $("#username").val() + "&email=" + $("#email").val(),
            success(data) {
                if (data == "SUCCESS") {
                    console.log("校验成功 date = " + data)
                    $.ajax({
                        type: "post",
                        url: "/user/sendEmail2/" + $("#email").val(),
                    });
                    $("#message").text("邮件发送成功, 请注意查收！").css("color", "green");
                } else if (data = "ERROR"){
                    $("#message").text("邮箱或用户名填写错误！").css("color", "red");
                    console.log("校验失败 date = " + data)
                }
            },error() {
                console.log("错误!")
            }
        });
    }
    function resetPass(){
        if(checkUser()  && checkPassword() && checkPasswordTwo() && checkEmail()) {
            console.log(111222)
            $.ajax({
                type: "post",
                url: "/user/update?username=" + $("#username").val() + "&email=" + $("#email").val()+"&password=" + $("#password").val()+"&code=" + $("#code").val(),
                success(data) {
                    if (data == "success") {
                        console.log("校验成功 date = " + data)
                        alert("找回密码成功，请重新登录！");
                        location.href='/handle/login';
                    } else if (data = "false"){
                        $("#message").text("验证码错误，请重新获取！").css("color", "red");
                        console.log("校验失败 date = " + data)
                    }
                },error() {
                    console.log("错误!")
                }
            });

        } else {
            return false;
        }
    }
    function checkPassword() {
        var pass = document.getElementById("password");
        var regs = /^[a-zA-Z0-9_]{3,12}$/;
        var message = document.getElementById("message4")
        if(regs.test(pass.value)) {
            message.style.color = "greenyellow";
            message.innerHTML = "✔";
            return true;
        } else {
            message.style.color = "red";
            message.innerHTML = "请输入3-12位中英文密码！";
            return false;
        }
    }
    function checkPasswordTwo() {
        var pass1 = document.getElementById("password").value;
        var pass2 = document.getElementById("password2").value;
        var message = document.getElementById("message5")
        if(pass1 == pass2 && pass2 != "") {
            message.style.color = "greenyellow";
            message.innerHTML = "✔";
            return true;
        } else {
            message.style.color = "red";
            message.innerHTML = "密码不一致";
            return false;
        }
    }
    function checkUser() {
        var user = document.getElementById("username");
        var regs = /^[a-zA-Z0-9\u4e00-\u9fa5_]{3,18}$/;
        var message = document.getElementById("message1")
        if(regs.test(user.value)) {
            message.style.color = "greenyellow";
            message.innerHTML = "✔";
            return true;
        } else {
            message.style.color = "red";
            message.innerHTML = "请输入3-18位中英文用户名！";
            return false;
        }
    }
    function checkEmail() {
        var reg = /[1-9]\d+@qq.com/;
        var email = document.getElementById("email").value;
        var message = document.getElementById("message2");
        if(reg.test(email)) {
            message.style.color = "greenyellow";
            message.innerHTML = "✔";
            return true;
        } else {
            message.style.color = "red";
            message.innerHTML = "邮箱格式错误，必须符合QQ邮箱格式";
            return false;
        }
    }
    function reset(){
        var msg1 = document.getElementsByClassName("msg1");
        for(var i = 0; i < msg1.length; i++) {
            msg1[i].innerHTML = "";
        }
    }
</script>